<template>
  <div class="params-info" v-if="paramsInfo">
    <!-- 尺码 -->
    <table class="size" v-if="paramsInfo.sizes">
      <tr v-for="(trItem, index) in paramsInfo.sizes" :key="index">
        <td v-for="(tdItem, index) in trItem" :key="index">
          {{ tdItem }}
        </td>
      </tr>
    </table>

    <!-- 参数 -->
    <table class="param" v-if="paramsInfo.params">
      <tr v-for="i in paramsInfo.params" :key="i.key">
        <td class="key">{{ i.key }}</td>
        <td class="value">{{ i.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "DetailParamsInfo",
  props: {
    paramsInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped  lang="less" >
.params-info {
  padding: 20px 10px;
  table {
    width: 100%;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    tr {
      height: 40px;
    }
    tr + tr {
      border-top: 1px solid #ddd;
    }
  }
  .param {
    margin-top: -2px;
    .key {
      width: 30%;
    }
    .value {
      color: palevioletred;
    }
  }
}
</style>
